<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>useD3</title>
</head>
<body>
  <p></p>
  <p></p>
  <p></p>
</body>

<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
  /** d3操作SVG*/
  d3.select('body')
    .append('svg')
    .attr('width', 500)
    .attr('height', 500)

  d3.select('svg')
    .append('circle')
    .attr('cx', 100).attr('cy', 100)
    .attr('r', 20).attr('fill', 'orange')

  /** D3一些通用操作*/
  const data = [1,3]
  // enter 当数据数量大于dom数量
  // d3.select('body')
  //   .selectAll('p')
  //   .data(data)
  //   .enter().append('p')
  //   .text(d => d + '啊哈')

  // update 当data数量等于dom数量
  // d3.select('body')
  //   .selectAll('p')
  //   .data(data).text(d => d + '哦吼')

  // exit 当data数量小于dom数量
  const p = d3.select('body')
    .selectAll('p')
    .data(data)
    .text(d => d + '哦吼')

  p.exit().remove()
</script>
</html>